<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>uc浏览器</title>
		<style>
			/* 初始样式 */
			*{
				margin: 0;
				padding: 0;
			}
			img{
				/* 让图片对齐底线 */
				vertical-align: bottom;
			}
			li{
				/* 去除前面的圆点 */
				list-style: none;	
			}
			a{
				text-decoration: none;
			}
			/* 公共样式 */
			.bd{
				border: 1px solid red;
			}
			.w{
				width: 986px;
				margin: 0 auto;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.clearfix::before,.clearfix::after{
				content:"";
				display: table;
			}
			.clearfix::after{
				clear:both;
			}
			/* header区域 */
			header{
				position: fixed;
				background-color: #fff;
				width: 100%;
				z-index: 1;
				top: 0;
			}
			.logo{
				padding-top: 15px;
				padding-bottom: 12px;
			}
			.navigation{
				padding-right: 20px;
				padding-top: 5px;
			}
			.navigation>li{
				margin-left: 32px;
				padding: 0 10px;
				position: relative;
			}
			.current{
				border-bottom: 3px solid #fe6500;
			}
			.navigation a{
				display: block;
				font-size: 20px;
				line-height: 62px;
			}
			.navigation>li:hover{
				border-bottom: 3px solid green;
			}
			.subnav{
				display: none;
				position: absolute;
/* 				top: 0;
				left: 0; */
			}
			.navigation>li:hover .subnav{
				display: block;
			}
			.subnav li:hover{
				background-color: yellow;
			}
			.subnav a{
				display: block;
				font-size: 16px;
				line-height: 20px;
			}
		/*main区域  */
		.main{
			margin-top: 70px;
		}
		.banner{
			height: 400px;
			background: #1a1a1a url(images/banner.jpg) no-repeat center 0;
		}
		.icons{
			border: 1px solid #efefef;
			height: 145px;

		}
		.icon{	
			padding-top: 58px;
			width: 138px;
			background: url(images/icon.png) 49px 21px no-repeat;
		}
		.icon:nth-child(2){
			background-position: -90px 21px;
		}
		.icon:nth-child(3){
			background-position: -227px 21px;
			position: relative;
		}
		.icon:nth-child(4){
			background-position: -366px 21px;
			position: relative;
		}
		.icon:nth-child(5){
			background-position: -508px 21px;
		}
		.icon:nth-child(6){
			background-position: -646px 21px;
		}
		.icon:hover{
			background-position: 49px -99px;
		}
		.icon:nth-child(2):hover{
			background-position: -90px -99px;
		}
		.icon:nth-child(3):hover{
			background-position: -227px -99px;
		}
		/* 下面是new图标 */
		.icon:nth-child(3)::before{
			content: "";
			width: 23px;
			height: 11px;
			background: url(images/icon.png) -140px -280px;
			position: absolute;
			top: 15px;
			left: 82px;
		}
		.icon:nth-child(4):hover{
			background-position: -366px -99px;
		}
		.icon:nth-child(4)::before{
			content: "";
			width: 23px;
			height: 11px;
			background: url(images/icon.png) -140px -280px;
			position: absolute;
			top: 15px;
			left: 81px;
			
		}
		.icon:nth-child(5):hover{
			background-position: -508px -99px;
		}
		.icon:nth-child(6):hover{
			background-position: -646px -99px;
		}
		.icon a{
			display: block;
			font-size: 11px;
			line-height: 81px;
			text-align: center;
			color: #434554;
		}
		.twocode{
			width: 128px;
			background: url(images/twocode.png) no-repeat;
			font-size: 11px;
			line-height: 71px;
			padding-top: 106px;
			text-align: center;
			position: absolute;
			top: -32px;
			right: -4px;
		}
		.icons .w{
			position: relative;
		}
		.news{
			padding-top: 20px;
		}
		.new:nth-child(1),.new:nth-child(2){
			margin-right: 58px;
		}
		.new{
			width: 290px;	
		}
		.title{
			
		}
		.pic{
			background: #f2f2f2 url(images/activity_pic.jpg) no-repeat;
			padding-top: 120px;
			padding-bottom: 3px;
		}
		.pic2{
			background: #f2f2f2 url(images/news_pic.jpg) no-repeat;
			padding-top: 120px;
			padding-bottom: 3px;
		}
		.pic3{
			background: #f2f2f2 url(images/community_pic.jpg) no-repeat;
			padding-top: 120px;
			padding-bottom: 3px;
		}
		.new ul{
			padding-bottom: 28px;
		}
		.title h4{
			font-size: 20px;
			line-height: 61px;
		}
		.title a{
			position: relative;
			font-size: 12px;
			line-height: 58px;
			margin-right: 16px;
		}
		.title a::before{
			content: '';
			width: 4px;
			height: 6px;
			border: 2px solid black;
			border-left-color:transparent ;
			border-bottom-color: transparent;
			transform: rotate(45deg);
			position: absolute;
			top: 25px;
			left: 24px;
		}
		/* .title div{
			width: 6px;
			height: 6px;
			border: 2px solid red;
			border-left-color:transparent ;
			border-bottom-color: transparent;
			transform: rotate(45deg);
			margin-top: 8px;
		} */
		.pic a,.pic2 a,.pic3 a{
			display: block;
			font-size: 12px;
			line-height:34px;
			display: block;
			text-align: center;
		}
		.new ul li{}
		.new ul li a{
			line-height: 14px;
			font-size: 13px;
			color: #473e5b;
		}
		/* footer区域 */
		footer{
			background-color: #333333;
		}
		.bottom{
			
		}
		.link{
			padding-top: 20px;
		}
		.copyright{
			
		}
		.list{
			padding-top: 47px;
			padding-bottom: 20px;
		}
		.list ul{
			float: left;
			width: 76px;
			height: 210px;
			margin-right: 89px;
		}
		.list ul:nth-child(6){
			margin-right: 0px;
			width: 161px;
		}
		.list ul:nth-child(6) .tt{
			border: 1px solid #434343;
		}
		.list ul li{

		}
		.list ul li a{
			display: block;
			font-size: 12px;
			line-height: 19px;
			color: #aea4ac;
		}
		.list ul:nth-child(6) li a{
			padding-left: 31px;
		}
		.list ul:nth-child(6) .tt a{
			padding-left: 30px;
		}
		.list ul:nth-child(6) li:nth-child(1){
			position: relative;
			padding-bottom: 17px;
		}
		.list ul:nth-child(6) li:nth-child(1)::before{
			content: "";
			width: 15px;
			height: 15px;
			background: url(images/icon.png) no-repeat 0px -293px,url(images/icon.png) no-repeat -31px -298px;
			position: absolute;
			top: 2px;
			left: 9px;	
		}
		.list ul:nth-child(6) li:nth-child(1)::after{
			content: "";
			width: 8px;
			height: 6px;
			background: url(images/icon.png) no-repeat -31px -298px;
			position: absolute;
			top: 7px;
			left: 121px;	
			
		}
		.list ul:nth-child(6) li:nth-child(2){
			position: relative;
		}
		.list ul:nth-child(6) li:nth-child(2)::before{
			content: "";
			width: 9px;
			height: 16px;
			background: url(images/icon.png) no-repeat -5px -319px;
			position: absolute;
			top: 0px;
			left: 12px;	
		}
		.list ul:nth-child(6) li:nth-child(3){
			position: relative;
		}
		.list ul:nth-child(6) li:nth-child(3)::before{
			content: "";
			width: 16px;
			height: 12px;
			background: url(images/icon.png) no-repeat -2px -347px;
			position: absolute;
			top: 4px;
			left: 9px;	
		}
		.list ul:nth-child(6) li:nth-child(4){
			position: relative;
		}
		.list ul:nth-child(6) li:nth-child(4)::before{
			content: "";
			width: 16px;
			height: 13px;
			background: url(images/icon.png) no-repeat -2px -373px;
			position: absolute;
			top: 4px;
			left: 9px;	
		}
		.list ul:nth-child(6) li:nth-child(5){
			position: relative;
		}
		.list ul:nth-child(6) li:nth-child(5)::before{
			content: "";
			width: 20px;
			height: 16px;
			background: url(images/icon.png) no-repeat 0px -397px;
			position: absolute;
			top: 2px;
			left: 7px;	
		}
		.list ul:nth-child(6) li:nth-child(6){
			position: relative;
		}
		.list ul:nth-child(6) li:nth-child(6)::before{
			content: "";
			width: 17px;
			height: 18px;
			background: url(images/icon.png) no-repeat -1px -422px;
			position: absolute;
			top: 2px;
			left: 8px;	
		}
		.list ul:nth-child(6) li:nth-child(7){
			position: relative;
		}
		.list ul:nth-child(6) li:nth-child(7)::before{
			content: "";
			width: 20px;
			height: 16px;
			background: url(images/icon.png) no-repeat -1px -449px;
			position: absolute;
			top: 2px;
			left: 8px;	
		}
		.tt{
			display: block;
			font-size: 12px;
			line-height: 20px;
			color: #aea4ac;
		}
		.link ul{
			border-top: 1px dotted #565656;
		}
		.link ul:nth-child(2){
			border-bottom: 1px dotted #565656;
		}
		.link ul li{
			float: left;
			padding-top: 14px;
			padding-bottom: 10px;
		}
		.link ul li a{
			padding: 0px 8px 2px 8px;
			display: block;
			font-size: 12px;
			line-height: 11px;
			color: #aca9a4;
			border-right: 2px solid #503c31;
		}
		.link ul li:nth-child(14) a{
			border-right: none;
		}
		.link ul li:nth-child(14){
			position: relative;
		}
		.link ul li:nth-child(14)::before{
			content: "";
			width: 16px;
			height: 16px;
			background: url(images/icon.png) no-repeat -100px -280px;
			position: absolute;
			top: 12px;
			left: 68px;	
		}
		.link ul li h4{
			padding: 0px 8px 2px 8px;
			font-size: 12px;
			color: #656668;
			line-height: 11px;
		}
		.left{
			margin-right: 103px;
		}
		.right{
			padding: 26px 0px 52px 0px;
		}
		.left div:nth-child(1){
			padding: 30px 16px 53px 0px;
		}
		.left div:nth-child(2){
			padding: 21px 0px 40px 0px;
		}
		.left div:nth-child(2) h5{
			line-height: 18px;
			font-size: 10px;
			color: #656e69;
		}
		.right div{
			margin-right: 12px;
		}
		.right div:nth-child(4){
			margin-right: 0px;
		}
		</style>
	</head>
	<body>
		<!-- 语义化标签 -->
		<header class="clearfix">
			<div class="w">
				<div class="logo fl"><img src="images/uclogo.png" alt=""></div>
				<!-- 无序列表 -->
				<ul class="navigation clearfix fr">
					<li class="fl current"><a href="">首页</a></li>
					<li class="fl">
						<a href="">下载</a>
						<ul class="subnav">
							<li><a href="">手机UC</a></li>
							<li><a href=""> 电脑浏览器</a></li>
							<li><a href="">TV浏览器</a></li>
						</ul>
						</li>
					<li class="fl"><a href="">公司</a></li>
					<li class="fl"><a href="">合作</a></li>
					<li class="fl"><a href="">社区</a></li>
					<li class="fl"><a href="">帮助</a></li>
				</ul>
			</div>
		</header>
		<!-- main区域 -->
		<div class="main">
			<div class="banner"></div>
			<div class="icons">
				<div class="w clearfix">
					<div class="icon fl"><a href="">Android版下载</a></div>
					<div class="icon fl"><a href="">iPhone版下载</a></div>
					<div class="icon fl"><a href="">电脑版下载</a></div>
					<div class="icon fl"><a href="">Pad版下载</a></div>
					<div class="icon fl"><a href="">TV版下载</a></div>
					<div class="icon fl"><a href="">WP版下载</a></div>
					<div class="twocode ">手机扫一扫下载</div>
				</div>
			</div>			
			<div class="news w clearfix">
				<div class="new fl">
					<div class="title clearfix">
						<h4 class="fl">活动专区</h4>
						<a class="fr" href="">更多</a>
					</div>
					<div class="pic"><a href="">上uc.cn，下载抢100M流量礼包</a></div>
					<ul>
						<li><a href=""> 你没得到奖，因为你没有摇一摇</a></li>
						<li><a href="">第二季环保袋活动开放申请啦</a></li>
						<li><a href="">最壕UC微信号，天天送大奖</a></li>
						<li><a href="">UC省钱攻略大曝光：6000万红包等你来！</a></li>
						<li><a href="">手机浏览器成移动上网第一入口 UC稳居市场</a></li>
					</ul>
				</div>
				<div class="new fl">
					<div class="title clearfix">
						<h4 class="fl">新闻动态</h4>
						<a class="fr" href="">更多</a>
					</div>
					<div class="pic2"><a href="">不断寻找合伙人</a></div>
					<ul>
						<li><a href=""> 神马搜索与《梦想星搭档》展开娱乐内</a></li>
						<li><a href="">UC九游11月报告：《乱斗西游》成MOBA手</a></li>
						<li><a href="">UC浏览器“抢票帮”颠覆传统 亲朋好友</a></li>
						<li><a href="">UC浏览器新版造就极致视频体验</a></li>
						<li><a href="">手机浏览器使用频率仅次于即时通讯</a></li>
					</ul>
				</div>
				<div class="new fl">
					<div class="title clearfix">
						<h4 class="fl">社区热帖</h4>
						<a class="fr" href="">更多</a>
					</div>
					<div class="pic3"><a href="">UC浏览器抢票帮正式发布！团结一切力量</a></div>
					<ul>
						<li><a href=""> UC浏览器Android版10.0皮肤制作教程</a></li>
						<li><a href="">年底求加薪技巧！哥拼的是拍马屁的技巧</a></li>
						<li><a href="">UC浏览器抢票帮——召唤朋友一起帮你抢</a></li>
						<li><a href="">UC姐神秘面容首次曝光，多图胆小慎入</a></li>
						<li><a href="">【uc记者团】2015年春节回家 攻略</a></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- foot区域 -->
		<footer>
			<div class="w bottom">
				<div class="list clearfix">
					<ul>
						<li><a href="" class="tt">UC浏览器</a></li>
						<li><a href="">产品动态</a></li>
						<li><a href="">功能介绍</a></li>
						<li><a href="">安卓浏览器</a></li>
						<li><a href="">iPhone浏览器</a></li>
						<li><a href="">电脑浏览器</a></li>
						<li><a href="">WP浏览器</a></li>
						<li><a href="">iPad浏览器</a></li>
						<li><a href="">aPad浏览器</a></li>
						<li><a href="">TV浏览器</a></li>
						<li><a href="">塞班浏览器</a></li>
					</ul>
					<ul>
						<li><a href="" class="tt">公司</a></li>
						<li><a href="">公司首页</a></li>
						<li><a href="">公司概况</a></li>
						<li><a href="">公司动态</a></li>
						<li><a href="">管理团队</a></li>
						<li><a href="">企业文化</a></li>
						<li><a href="">粉丝专区</a></li>
						<li><a href="">荣誉之旅</a></li>
						<li><a href="">联系我们</a></li>
						<li><a href="">投资者</a></li>
						<li><a href="">UC闪屏</a></li>
					</ul>
					<ul>
						<li><a href="" class="tt">其他产品</a></li>
						<li><a href="">UC九游</a></li>
						<li><a href="">PP助手</a></li>
						<li><a href="">神马搜索</a></li>
						<li><a href="">UC云</a></li>
						<li><a href="">U点充值</a></li>
						<li><a href="">用户中心</a></li>
						<li><a href="">体验中心</a></li>
						<li><a href="">帮助中心</a></li>
						<li><a href="">意见反馈</a></li>
					</ul>
					<ul>
						<li><a href="" class="tt">开放合作</a></li>
						<li><a href="">游戏开放平台</a></li>
						<li><a href="">运营商合作</a></li>
						<li><a href="">终端厂商合作</a></li>
						<li><a href="">互联网合作</a></li>
						<li><a href="">开发者中心</a></li>
						<li><a href="">战略投资</a></li>
					</ul>
					<ul>
						<li><a href="" class="tt">招聘</a></li>
						<li><a href="">社会招聘</a></li>
						<li><a href="">人才推荐</a></li>
						<li><a href="">校园招聘</a></li>
						<li><a href="">实习生招聘</a></li>
						<li><a href="">内部推荐</a></li>
						<li><a href="">走进UC</a></li>
					</ul>
					<ul>
						<li><a href="" class="tt">中文版</a></li>
						<li><a href="">手机站</a></li>
						<li><a href="">Pad站</a></li>
						<li><a href="">TV站</a></li>
						<li><a href=""> UC浏览器贴吧</a></li>
						<li><a href=""> UC浏览器微信</a></li>
					</ul>
				</div>
				<div class="link">
						<ul class="clearfix">
							<li><a href="">阿里巴巴集团</a></li>
							<li><a href="">淘宝网</a></li>
							<li><a href="">天猫</a></li>
							<li><a href="">聚划算</a></li>
							<li><a href="">全球速卖通</a></li>
							<li><a href="">阿里巴巴国际交易市场</a></li>
							<li><a href="">1688</a></li>
							<li><a href="">阿里妈妈</a></li>
							<li><a href="">阿里旅行·去啊</a></li>
							<li><a href="">阿里云计算</a></li>
							<li><a href="">YunOS</a></li>
							<li><a href="">阿里通信</a></li>
							<li><a href="">万网</a></li>
							<li><a href="">高德</a></li>
						</ul>
						<ul class="clearfix">
							<li><h4>友情链接:</h4></li>
							<li><a href="">手机游戏</a></li>
							<li><a href="">网易科技</a></li>
							<li><a href="">dospy智能手机网</a></li>
							<li><a href="">历趣手机软件</a></li>
							<li><a href="">威锋网</a></li>
							<li><a href="">小说全搜</a></li>
							<li><a href="">IT之家</a></li>
							<li><a href="">前瞻网</a></li>
							<li><a href="">手机软件下载</a></li>
							<li><a href="">pc6下载</a></li>
							<li><a href="">KK语音</a></li>
							<li><a href="">安卓市场</a></li>
							<li><a href="">机锋网</a></li>
						</ul>
				</div>
				<div class="copyright clearfix">
					<div class="left fl">
						<div class="fl">
							<img src="images/logo_company.png" alt="">
						</div>
						<div class="fl">
							<h5>2004-2014 uc.cn 版权所有 网络文化经营许可证：文网文[2010]176号</h5>
							<h5>中华人民共和国互联网药品信息服务资格证：（粤）-非经营性-2011-0120</h5>
							<h5>增值电信业务经营许可证: 粤B2-20070379 粤ICP备09210879号</h5>
						</div>
					</div>
					<div class="right fl">
						<div class="fl"><img src="images/qa_wen.png" alt=""></div>
						<div class="fl"><img src="images/gs.png" alt=""></div>
						<div class="fl"><img src="images/knet_cn.png" alt=""></div>
						<div class="fl"><img src="images/anva.png" alt=""></div>
					</div>
				</div>
			</div>	
		</footer>
	</body>
</html>
